<template>
	<view class="container">
		<view class="page-header">
			<u-icon name="arrow-left" size="20" @click="goBack" class="back-icon"></u-icon>
			<text class="header-title">修改昵称</text>
		</view>
		
		<view class="content-box">
			<view class="input-box">
				<u--input
					v-model="nickname"
					placeholder="请输入昵称"
					border="bottom"
					clearable
				></u--input>
			</view>
			
			<view class="tips">
				<text>昵称长度为2-16个字符</text>
			</view>
			
			<view class="button-wrapper">
				<button class="save-btn" @click="saveNickname">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	
	export default {
		data() {
			return {
				nickname: '',
				userInfo: null
			};
		},
		onLoad() {
			// 获取用户信息
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.userInfo && this.userInfo.userName) {
				this.nickname = this.userInfo.userName;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 保存昵称
			async saveNickname() {
				// 验证昵称长度
				if (!this.nickname || this.nickname.length < 2 || this.nickname.length > 16) {
					uni.showToast({
						title: '昵称长度应为2-16个字符',
						icon: 'none'
					});
					return;
				}
				
				try {
					uni.showLoading({
						title: '保存中...'
					});
					
					const res = await request({
						url: `api/user-service/user/updateNickname?userId=${this.userInfo.userId}&nickname=${this.nickname}`,
						method: 'POST',

					});
					
					uni.hideLoading();
					
					if (res.code === 200) {
						// 更新本地存储中的用户信息
						this.userInfo.userName = this.nickname;
						uni.setStorageSync('userInfo', this.userInfo);
						
						uni.showToast({
							title: '昵称修改成功',
							icon: 'success'
						});
						
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.message || '修改失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '修改失败，请重试',
						icon: 'none'
					});
					console.error('修改昵称失败', error);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.page-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90rpx;
	background-color: #ffffff;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-icon {
	position: absolute;
	left: 30rpx;
}

.header-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.content-box {
	padding: 30rpx;
}

.input-box {
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	border-radius: 8rpx;
}

.tips {
	margin-top: 20rpx;
	padding: 0 10rpx;
}

.tips text {
	font-size: 24rpx;
	color: #999;
}

.button-wrapper {
	margin-top: 60rpx;
}

.save-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	background-color: #4CAF50;
	color: #ffffff;
	font-size: 32rpx;
	border-radius: 45rpx;
	border: none;
}
</style> 